<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login">
    <header class="login-header">
      <div class="left">基于vue的前端基础框架</div>
      <div class="right">
        <ul>
          <li>首页</li>
          <li>帮助</li>
          <li>版本更新</li>
        </ul>
      </div>
    </header>
    <main>
      <div class="login-con">
        <Card icon="log-in" title="欢迎登录" :bordered="false">
          <div class="form-con">
            <login-form @on-form-valid="handleSubmit" :loading="loading"></login-form>
          </div>
        </Card>
    </div>
    </main>
    <footer class="login-footer">
      <p>思维空间技术博客技术支持</p>
      <p>张建玲版权所有V1.0</p>
    </footer>
  </div>
</template>

<script>
import LoginForm from '_c/login-form/index'
import { mapActions } from 'vuex'
export default {
  components: {
    LoginForm
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    ...mapActions([
      'handleLogin'
    ]),
    handleSubmit ({ userName, password }) {
      this.loading = true
      let _this = this
      this.handleLogin({ userName, password }).then(res => {
        if (res.code === 1) {
          this.$router.replace({
            name: _this.$config.homeName
          })
        } else {
          this.$router.replace('login')
        }
      })
      this.loading = false
    }
  }
}
</script>

<style>
</style>
